/**
 * @description  : 案件统计-查询条件组件
 * @descriptionDetail : 案件统计-查询条件组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 13:59:45
 */
<template>
  <view class="pagebody">
    <view class="wrapTime">数据截止日期：{{ endDate }}</view>
    <view class="wrapCon">
      <view class="wrapCond">
        <view class="wrapBodyleft">
          <u-icon custom-prefix="csbi-icon" name="aim" size="30" :color="$theme.u_type_primary"></u-icon>
          <text style="margin-left: 20rpx;font-size: 30rpx;">当前条件</text>
        </view>
      </view>
      <view
        style="margin-top:20rpx;margin-bottom: 10rpx; width:100%;display: flex;flex-direction: row;align-items: center;"
      >
        <view style="margin-right: 20rpx;">当前层级：</view>
        <u-tag mode="plain" type="info" v-if="regs" :text="regs" />
      </view>
    </view>
    <view class="wrapCon">
      <view class="wrapCond">
        <view class="wrapBodyleft">
          <u-icon custom-prefix="csbi-icon" name="clock" size="30" :color="$theme.u_type_primary"></u-icon>
          <text style="margin-left: 20rpx;font-size: 30rpx;">时间选择</text>
        </view>
        <u-button
          @click="resetTime"
          size="mini"
          plain
          type="primary"
          style="margin-left: inherit;margin-right: inherit;"
        >重置</u-button>
      </view>
      <view style="margin-top:20rpx;margin-bottom: 10rpx; width:100%;">
        <u-subsection
          :active-color="$theme.u_type_primary"
          mode="subsection"
          :list="slist"
          :current="sCurrent"
          @change="sChange"
        ></u-subsection>
      </view>
      <view style="display: flex;flex-direction: row;justify-content: space-between;">
        <view class="wrapbot" @click="choiceTime(0)">
          <view class="wrapbotTime">{{ timeOverStart }}</view>
          <u-icon name="calendar" size="30" :color="$theme.cm_form_right_icon_color"></u-icon>
        </view>
        <view class="wrapbot" style="margin-left: 20rpx;" @click="choiceTime(1)">
          <view class="wrapbotTime">{{ timeOverEnd }}</view>
          <u-icon name="calendar" size="30" :color="$theme.cm_form_right_icon_color"></u-icon>
        </view>
      </view>
      <view
        style="display: flex;flex-direction: row;justify-content: space-between; padding: 5px 0;"
      >
        <view class="title-u">最小案值</view>
        <view style="width: 68%;">
          <u-input
            v-model="minCaseVal"
            type="number"
            placeholder="请输入数值(万元)"
            :border="true"
            :clearable="true"
          />
        </view>
      </view>
      <view
        style="display: flex;flex-direction: row;justify-content: space-between; padding: 5px 0;"
      >
        <view class="title-u">最大案值</view>
        <view style="width: 68%;">
          <u-input
            v-model="maxCaseVal"
            type="number"
            placeholder="请输入数值(万元)"
            :border="true"
            :clearable="true"
          />
        </view>
      </view>
      <view style="margin-top:20rpx;margin-bottom: 10rpx; width:100%;">
        <u-subsection
          :active-color="$theme.u_type_primary"
          mode="subsection"
          :list="logicSlist"
          :current="logic"
          @change="logicChange"
        ></u-subsection>
      </view>

      <view
        style="display: flex;flex-direction: row;justify-content: space-between; padding: 5px 0;"
      >
        <view class="title-u">最小卷烟数量</view>
        <view style="width: 68%;">
          <u-input
            v-model="mincigQty"
            type="number"
            placeholder="请输入数值(件)"
            :border="true"
            :clearable="true"
          />
        </view>
      </view>
      <view
        style="display: flex;flex-direction: row;justify-content: space-between; padding: 5px 0;"
      >
        <view class="title-u">最大卷烟数量</view>
        <view style="width: 68%;">
          <u-input
            v-model="maxcigQty"
            type="number"
            placeholder="请输入数值(件)"
            :border="true"
            :clearable="true"
          />
        </view>
      </view>
    </view>
    <view class="popup-submit-btns">
      <u-button class="u-btn" plain type="primary" @click="reset">全部重置</u-button>
      <u-button class="u-btn" type="primary" @click="confirm">确定</u-button>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  name: "CaseSearchCom",
  props: {
    endDate: {
      type: String,
      default: ""
    },
    curTimeStart: {
      type: String,
      default: ""
    },
    curTimeEnd: {
      type: String,
      default: ""
    },
    regs: {
      // 前置条件
      type: String,
      default: undefined
    },
    currentPro: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      timeOverStart: "",
      timeOverEnd: "",
      minCaseVal: "",
      maxCaseVal: "",
      mincigQty: "",
      maxcigQty: "",
      slist: [
        { name: "当年", value: 0 },
        { name: "当月", value: 1 }
      ],
      logicSlist: [
        { name: "或", value: 0 },
        { name: "且", value: 1 }
      ],
      logic: 1,
      sCurrent: 0
    };
  },
  created() {
    if (!this.$u.test.isEmpty(this.curTimeStart)) {
      this.timeOverStart = this.curTimeStart;
    }
    if (!this.$u.test.isEmpty(this.curTimeEnd)) {
      this.timeOverEnd = this.curTimeEnd;
    }
    this.sCurrent = this.currentPro;
  },
  methods: {
    resetTime() {
      this.sCurrent = 0;
      this.$emit("clearCurrent");
      this.timeOverStart = moment()
        .startOf("year")
        .format("YYYY-MM-DD");
      this.timeOverEnd = moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD");
    },
    reset() {
      this.resetTime();
      this.$emit("search", {
        isReset: true,
        data: {
          timeOverStart: this.timeOverStart,
          timeOverEnd: this.timeOverEnd,
          minCaseVal: this.minCaseVal,
          maxCaseVal: this.maxCaseVal,
          mincigQty: this.mincigQty,
          maxcigQty: this.maxcigQty
        }
      });
    },
    sChange(e) {
      this.sCurrent = e;
      this.$emit("currentFn", e);
      if (this.slist[this.sCurrent].value == 0) {
        this.timeOverStart = moment()
          .startOf("year")
          .format("YYYY-MM-DD");
      } else {
        this.timeOverStart = moment()
          .startOf("month")
          .format("YYYY-MM-DD");
      }
      this.timeOverEnd = moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD");
    },
    logicChange(e) {
      this.logic = e;
    },
    confirm() {
      this.$emit("search", {
        isReset: false,
        data: {
          timeOverStart: this.timeOverStart,
          timeOverEnd: this.timeOverEnd,
          minCaseVal: this.minCaseVal,
          maxCaseVal: this.maxCaseVal,
          mincigQty: this.mincigQty,
          maxcigQty: this.maxcigQty,
          logic: this.logic
        }
      });
    },
    choiceTime(flag) {
      this.$emit("choiceTime", flag);
    }
  }
};
</script>

<style scoped lang="scss">
.pagebody {
  background: #eeeeee;
  height: 100vh;
}

.wrapTime {
  background: #e3f4fe;
  color: $u-type-primary;
  font-weight: 500;
  font-size: 32rpx;
  padding: $cm-conent-padding-column $cm-content-paddng-row;
}

.popup-submit-btns {
  padding: $cm-conent-padding-column $cm-content-paddng-row;
  position: fixed;
  bottom: 0;
}

.wrapBody {
  padding: 20rpx 36rpx;
  display: flex;
  font-size: 26rpx;
  justify-content: space-between;
  background: #fff;
}

.wrapCond {
  // padding:20rpx 36rpx;
  display: flex;
  font-size: 26rpx;
  justify-content: space-between;
  background: #fff;
}

.wrapBodyleft {
  display: flex;
  align-items: center;
}

.wrapimg {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.wrapRImg {
  width: 36rpx;
  height: 36rpx;
  transform: rotate(-90deg);
}

.wrapCon {
  background: #ffffff;
  padding: 20rpx 36rpx;
  margin-top: 20rpx;
}

.wrapbot {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 0.0125rem solid $cm-form-item-bottom-border-color;
  padding: 16rpx 20rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  width: 100%;
  margin-top: 20rpx;
}

.title-u {
  display: flex;
  align-items: center;
}

.wrapbotTime {
  margin-right: 10rpx;
  font-size: 26rpx;
}
</style>
